<!--
 * @Author: early-autumn
 * @Date: 2020-05-21 10:44:28
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-03 19:49:51
-->
<template>
  <el-dialog
    title="看诊项目管理"
    :visible="value"
    width="680px"
    append-to-body
    :before-close="handleClose"
  >
    <el-button
      class="button"
      type="primary"
      icon="el-icon-plus"
      @click="handleCreateSeeingProjectVisible"
    >
      新建看诊项目
    </el-button>

    <el-table v-loading="loading" :data="seeingProjectList">
      <el-table-column
        label="大类"
        align="center"
        prop="firstCategory"
      ></el-table-column>
      <el-table-column
        label="项目名称"
        align="center"
        prop="name"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <create-seeing-project
      v-model="createSeeingProjectVisible"
      @submit="handleCreateSeeingProjectSubmit"
    ></create-seeing-project>
  </el-dialog>
</template>

<script>
import CreateSeeingProject from './CreateSeeingProject'
import { addItem, delItem, listItem } from '@/api/services/item'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 10,
}

export default {
  name: 'SeeingProjectManager',
  components: {
    CreateSeeingProject,
  },
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 加载中
      loading: false,
      // 总数
      total: 0,
      // 查询参数
      queryParams: {},
      // 看诊项目列表
      seeingProjectList: [],
      // 创建看诊项目
      createSeeingProjectVisible: false,
    }
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.queryParams = { ...QUERY_PARAMS }
        this.getList()
      }
    },
  },
  methods: {
    /**
     * 查询看诊项目列表
     */
    async getList() {
      this.loading = true

      const { rows, total } = await listItem(this.queryParams)

      this.seeingProjectList = rows
      this.total = total
      this.loading = false
    },
    /**
     * 关闭
     */
    handleClose() {
      this.$emit('close', false)
    },
    /**
     * 删除
     */
    async handleDelete(scope) {
      try {
        await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          type: 'warning',
        })
        await delItem(scope.row.id)

        this.getList()
        this.msgSuccess('删除成功')
        this.$emit('update')
      } catch (err) {
        err
      }
    },
    /**
     * 创建看诊项目
     */
    handleCreateSeeingProjectVisible() {
      this.createSeeingProjectVisible = true
    },
    /**
     * 创建看诊项目
     */
    async handleCreateSeeingProjectSubmit(e) {
      const { code, msg } = await addItem(e)

      if (code === 200) {
        this.msgSuccess('新增成功')
        this.getList()
        this.$emit('update')
      } else {
        this.msgError(msg)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.button {
  margin-bottom: 20px;
}
</style>
